<template>
	<div id="example">
		<select v-model="prov" @change="provChange('prov',prov)">
			<option v-for="(item, key, index) in AllProvince"   :key="item.id"   :value="item.c_code+','+item.id">
				{{item.name}}
			</option>
		</select>
		<select v-model="city" @change="provChange('city',city)">
			<option v-for="(item, key, index) in AllCity"   :key="item.id"   :value="item.c_code+','+item.id">
				{{item.name}}
			</option>
		</select>
		<select v-model="district" @change="provChange('district',district)">
			<option v-for="(item, key, index) in Alldistrict"   :key="item.id"   :value="item.c_code+','+item.id">
				{{item.name}}
			</option>
		</select>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		name: "CitySelect",
		data() {
			return {
				prov: "",
				city: "",
				district: ""}
			},
			computed: {
					...mapGetters([
						'AllProvince',
						'AllCity',
						'Alldistrict',
						'Cregist'
					])
				},
				mounted() {},
				created() {
					this.getAllProvince({});
				},
				methods: {
					...mapActions({
						getAllProvince: "getAllProvince",
						getAllCity: "getAllCity",
						setCregist:'setCregist'
					}),
					provChange(type, prov) {
						var provs = prov.split(",")
						var req_Cregist=JSON.parse(JSON.stringify(this.Cregist)); //this.templateData是父组件传递的对象
						if(type!="district"){
							var data = {
								type: type,
								data: {
									id: provs[1]
								}
							};
							this.getAllCity(data)
						}
						if (type === "prov") {
							
								var data = {
									type: 'city',
									data: {
										id:0
									}
								};
								this.getAllCity(data)
							req_Cregist.province=provs[0];
							req_Cregist.county="";
							req_Cregist.city="";
						}
						if(type==="city"){
							req_Cregist.county=provs[0];
							req_Cregist.city="";
						}
						if(type==="district"){
							req_Cregist.city=provs[0];
						}
						this.setCregist(req_Cregist)
					}
				},
				beforeMount: function() {
					var data = {
						type: '',
						data: {
							id: 0
						}
					};
					if (this.prov === "" && this.city === "") {
						var data = {
							type: '',
							data: {
								id: 0
							}
						};
						this.getAllCity(data)
					}

				},
				watch: {
					// prov: function() {},
					// 			city: function() {
					// 				this.updateDistrict();
					// 			}
				}
		}
</script>

<style scoped="scoped" lang="less">
	#example {
		width: 100%;
		height: 30px;
		display: flex;
		border:1px solid #DCDFE6;
		border-radius: 5px;
		overflow: hidden;

		select {
			width: 33%;
			border: none;
		}
	}
</style>
